<!-- 审核详情弹窗 -->
<template>
  <a-modal title="审核详情" :visible="visible" @ok="visible = false" :footer="null" @cancel="visible = false" :width="800"
    :maskClosable="false">
    <a-tabs v-model="currentApproval">
      <a-tab-pane v-for="(stage, sIndex) in stageList" :key="sIndex" :tab="stage.name">
        <div v-for="(group, index) in stage.formGroupList" class="group" :key="index">
          <div class="_header">
            <span style="font-size: 18px; font-weight: bold">{{ group.name }}</span>
          </div>
          <Form v-if="reqDone" :item="group.formItemVoMap" :formName="`form_${sIndex}_${index}`" :disabled="true">
          </Form>
        </div>

        <div v-if="stage.auditStatus !== 0" style="margin-top: 20px">
          <span style="font-size: 20px; font-weight: bold">审核备注：</span>{{ stage.remark }}
        </div>
        <div v-if="type === 'approval' && stage.auditStatus === 0" class="btn-box">
          <a-button type="primary" size="large" style="width: 50%" @click="showApprovalModal">入会审核</a-button>
        </div>
      </a-tab-pane>
    </a-tabs>
    <ApprovalModal ref="approvalModal" @success="approvalSuccess" />
  </a-modal>
</template>

<script>
import Form from '@/components/Form'
import ApprovalModal from './approvalModal.vue'
import { memberApplyFormDetails, convertFieldValue } from '@/api/member/member'
export default {
  components: {
    Form,
    ApprovalModal,
  },
  data() {
    return {
      visible: false,
      reqDone: false,
      row: {},
      type: 'detail',
      stageList: [],
      resData: {},
      currentApproval: 0,
    }
  },
  computed: {},
  watch: {},
  methods: {
    show(row, type) {
      this.row = row
      this.type = type
      this.getMemberApplyFormDetails()
      this.visible = true
    },
    async getMemberApplyFormDetails(pass) {
      try {
        this.reqDone = false
        let res = await memberApplyFormDetails(this.row.id)
        this.resData = res.data || {}
        this.stageList = (res.data.memberCustomFormStageVoList || []).map((stage) => {
          return {
            ...stage,
            formGroupList: (stage.formGroupList || []).map((group) => {
              return {
                ...group,
                formItemVoMap: ((stage.formItemVoMap && stage.formItemVoMap[group.id]) || []).map((item) => {
                  let answerItem = stage.formUserItemAnswerMap ? stage.formUserItemAnswerMap[item.id] : undefined

                  let text = convertFieldValue(answerItem, item)

                  return {
                    ...item,
                    content: text,
                    customFormItemAnswerDtoList: item.customFormItemAnswerList || [],
                  }
                }),
              }
            }),
          }
        })
        this.currentApproval = this.stageList.length - 1
        if (this.resData.isFinish === 1 && this.type === 'approval' && pass) {
          this.$emit('toMemberSet', this.row)
        }
      } catch (e) {
        console.error(e);
      } finally {
        this.reqDone = true
      }

    },
    showApprovalModal() {
      this.$refs.approvalModal.show(this.row.id)
    },
    async approvalSuccess(pass) {
      await this.getMemberApplyFormDetails(pass)
      this.visible = false
      this.$emit('success')
    },
  },
  created() { },
  mounted() { },
}
</script>
<style scoped lang="less">
.group {
  margin-top: 20px;
  padding: 10px;
  border-radius: 20px;
  background: #f6f5ec;

  ._header {
    margin: 20px 0;
    margin-left: 20px;
  }
}

.btn-box {
  margin-top: 20px;
  text-align: center;
}
</style>